<template>
  <div class="bigbox">
    <!-- 搜索盒子 -->
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="60px">
          <el-col :span="5">
            <el-form-item label="建筑群">
              <FilterSelect2
                    v-model="buildingId"
                    :optionlist="qiyelist"
                    @updateModelValue="changeqiye"
                    :valuekey="{ name: 'name', value: 'id' }"
                  ></FilterSelect2>
            </el-form-item>
          </el-col>
      </el-form>
    </div>
    <!-- 第二层盒子 -->
    <div class="bodyer">
      <!-- 用户情况 -->
      <div class="little">
        <div class="title">
          <div class="biock"></div>
          <div class="texts">用户情况</div>
        </div>
        <div ref="yonghuqingkuang" style="height: 93%;"></div>
      </div>
      <!-- 欠费名单 -->
      <div class="little">
        <div class="title">
          <div class="biock"></div>
          <div class="texts">欠费名单</div>
        </div>
        <div style="height: 92%;">
          <TableColumn :tableData="tableDataqf" :tableConfig="tableConfigqf" ref="tableqf"></TableColumn>
        </div>
      </div>
      <!-- 费用告警名单 -->
      <div class="little">
        <div class="title">
          <div class="biock"></div>
          <div class="texts">费用告警名单</div>
        </div>
        <div style="height: 92%;">
          <TableColumn :tableData="tableDatagj" :tableConfig="tableConfiggj" ref="tablegj"></TableColumn>
        </div>
      </div>
    </div>
    <!-- 第三层盒子 -->
    <div class="footer">
      <!-- 收益情况 -->
      <div class="threebox">
        <div class="foot">
          <div class="title">
            <div class="biock"></div>
            <div class="texts">收益情况</div>
          </div>
          <div>
            <el-radio-group v-model="radioshouyi" size="mini" @change="changeshouyi">
              <el-radio-button label="月"></el-radio-button>
              <el-radio-button label="年"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div ref="shouyiqingk" style="height: 93%;"></div>
      </div>
      <!-- 收益明细 -->
      <div class="threebox">
        <div class="foot">
          <div class="title">
            <div class="biock"></div>
            <div class="texts">收益明细</div>
          </div>
          <div>
            <el-radio-group v-model="radioming" size="mini" @change="changemingxi">
              <el-radio-button label="月"></el-radio-button>
              <el-radio-button label="年"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div ref="shouyimingxi" style="height: 93%;"></div>
      </div>
      <!-- 重点关注对象 -->
      <div class="threebox">
        <div class="foot">
          <div class="title">
            <div class="biock"></div>
            <div class="texts">重点关注用户</div>
          </div>
        </div>
        <div style="height: 92%;">
          <TableColumn :tableData="tableDatazd" :tableConfig="tableConfigzd" ref="tablezd"></TableColumn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getshouyiapi,getshouyimingxiapi,getcaiwugaikuangapi} from '@/api/prwpaid/summarize/Financialdashboard'
import { getloginlistapi } from '@/api/prwpaid/file-management/Architectural-complex'
import * as echarts from 'echarts';
import TableColumn from '@/components/Table/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    TableColumn
  },
  data() {
    return {
      qiyelist:[],
      radioming:'月',
      radioshouyi:'月',
      buildingId: '',
      tableDataqf: [],
      tableConfigqf: [
        { label: '用户名称', prop: 'customerName' ,width:'230'},
        { label: '欠费金额', prop: 'fee',center:'right' },
        { label: '欠费天数', prop: 'feeDays',center:'right' },
      ],
      tableDatagj: [],
      tableConfiggj: [
      { label: '用户名称', prop: 'customerName' ,width:'230'},
        { label: '账户余额', prop: 'balance' ,center:'right' },
        { label: '告警金额', prop: 'alarmAmount',center:'right' },
      ],
      tableDatazd: [],
      tableConfigzd: [
      { label: '用户', prop: 'customerName' ,width:'230'},
        { label: '欠费次数', prop: 'times' ,center:'right'},
        { label: '目前状态', prop: 'state',center:'center'  },
      ]
    };
  },

  async mounted() {
    // 获取建筑群
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId= localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId);
    if(isBuildIdInArray){
      this.buildingId = localbuildingId?localbuildingId:res.data.list[0].id
    }else{
      this.buildingId = res.data.list[0].id
    }
    
    this.changeqiye(this.buildingId)
  },

  methods: {
    // 建筑群下拉
    changeqiye(val) {
      console.log(val);
      localStorage.setItem('buildingId', val)
      // 获取收益情况
      this.getshouyi()
      // 获取收益明细
      this.getshouyiming()
      // 获取财务概况
     this.getcaiwugaikuang()
    },
    // 获取财务概况
    async getcaiwugaikuang() {
      this.$refs.tableqf.loading=true
      this.$refs.tablegj.loading=true
      this.$refs.tablezd.loading=true
      const { data: { entity } } = await getcaiwugaikuangapi({ buildingId: this.buildingId })
      this.tableDataqf=entity.arrearsCustomerList
      this.tableDatagj=entity.alarmCustomerList
      this.tableDatazd=entity.keyFocusCustomerList
      this.$refs.tableqf.loading=false
      this.$refs.tablegj.loading=false
      this.$refs.tablezd.loading=false
      this.getnenghaopai(entity)
    },
    // 获取收益明细
    async getshouyiming() {
      const { data: { list } } = await getshouyimingxiapi({buildingId:this.buildingId,timeType:this.radioming=='月'?'1':'2'})
      this.getshouyimingxi(list)
    },
    // 收益明细年月选择
    changemingxi() {
      this.getshouyiming()
    },
    // 获取收益情况
    async getshouyi() {
      const {data:{entity}} = await getshouyiapi({buildingId:this.buildingId,timeType:this.radioshouyi=='月'?'1':'2'})
      this.getshouyiqing(entity)
    },
    // 收益情况切换年月
    changeshouyi() {
      this.getshouyi()
    },
    // 获取用户情况图表
    getnenghaopai(entity) {
      var chartDom = this.$refs.yonghuqingkuang
      var myChart = echarts.init(chartDom);
      var option;

       option = {
        backgroundColor: 'white',
        tooltip: {
          show: true,
          trigger: 'item',
          //{a}(系列名)，{b}(数据项名),{c}(数值),{d}(百分比)
          formatter: "{a} <br/>{b} : {d}%",
        },

        legend: {
          // orient: 'vertical',
          left: 'center',
          bottom: '3%',
          itemWidth: 15,
          itemHeight: 10,
          itemGap: 25,
          borderRadius: 4,
          textStyle: {
            color: "#000",
            fontFamily: "Alibaba PuHuiTi",
            fontSize: 14,
            fontWeight: 400,
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '65%',
            center: ['50%', '40%'],
            data: [
              { value: entity.normalCustomerNumber, name: '正常用户' },
              { value: entity.arrearsCustomerNumber, name: '欠费用户' },
              { value: entity.feeWarningCustomerNumber, name: '费用告警用户' },
            ],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#5291ff','#e67373','#e6b75d'];
                  return colorList[colors.dataIndex];
                }
              },
            },
            label: {
              normal: {
                formatter: ["{b|{b}}", "{c|{d}%}"].join("\n"),
                rich: {
                  c: {
                    color: "inherit",
                    fontSize: 20,
                    fontWeight: "bold",
                    lineHeight: 5,
                  },
                  b: {
                    fontSize: 15,
                    height: 40,
                  },
                },
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
    //图表响应处理
        myChart.resize();
      });
    },
    // 获取收益情况图表
    getshouyiqing(entity) {
      var chartDom = this.$refs.shouyiqingk
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: '2%',
          left: 'center'
        },
        series: [
          {
            name: '收益情况',
            type: 'pie',
            center:['50%','40%'],
            radius: ['40%', '70%'],
            // avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
                    normal: {
                      formatter: ["{b|{b}}", "{c|{d}%}"].join("\n"),
                      rich: {
                        c: {
                          color: "inherit",
                          fontSize: 20,
                          fontWeight: "bold",
                          lineHeight: 5,
                        },
                        b: {
                          fontSize: 15,
                          height: 40,
                        },
                      },
                    },
                  },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: entity.rechargeFee, name: '充值费用' },
              { value: entity.usageFee, name: '用能费用' },
              { value: entity.refundFee, name: '退款费用' },
            ]
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
    //图表响应处理
        myChart.resize();
      });
    },
    // 获取收益明细图表
    getshouyimingxi(list) {
      var chartDom = this.$refs.shouyimingxi
      var myChart = echarts.init(chartDom);
      var option;
      const chongzhi = []
      const dianfei = []
      const shuifei = []
      const array=[]
      list.map(ele => {
        if (ele.datalist.length) {
          ele.datalist.map(item => {
            array.push(item.timeReading)
          })
         }
        if (ele.name == '充值明细') {
          ele.datalist.map(item => {
            chongzhi.push(item.valueReading)
          })
        } else if (ele.name == '电费明细') {
          ele.datalist.map(item => {
            dianfei.push(item.valueReading)
          })
        }
        else if (ele.name == '水费明细') {
          ele.datalist.map(item => {
            shuifei.push(item.valueReading)
          })
        }
       })
      option = {
        legend: {
          right:'2%'
        },
        tooltip: {
          trigger:'axis'
        },
        grid:
          {
            top: '8%',
          left:'10%',
          right:'5%',
          bottom:'10%'
          },
        xAxis: [
        {
          type: 'category',
          data: array,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
        yAxis: {
          type: 'value',
      name:'(元)'
        },
        series: [ {
            name: '充值明细',
            type: 'bar',
            data: chongzhi,
            itemStyle: {
                      color: '#187cf5' // 设置柱子颜色为天蓝色
                  }
          },
          {
            name: '电费明细',
            type: 'bar',
            data: dianfei,
            itemStyle: {
                      color: '#e6b75d' // 设置柱子颜色为天蓝色
                  }
          },
          {
            name: '水费明细',
            type: 'bar',
            data: shuifei,
            itemStyle: {
                      color: '#17e3c3' // 设置柱子颜色为天蓝色
                  }
          }
          ]
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
    //图表响应处理
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.option{
  padding-left: 10px;
}
.bigbox{
  padding: 10px;
  .topbox{
    height: 80px;
    background-color: #fff;
    padding:20px;
    margin-bottom: 10px;
  }
  .bodyer{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .little{
      width: 32.9%;
      height: 400px;
      background-color: #fff;
      padding: 15px;
      .title{
        display: flex;
        margin-bottom: 10px;
        .biock{
          width: 3px;
          height: 18px;
          background-color: #187cf5;
          margin-right: 10px;
          margin-top: 2px;
          border-radius: 1px;
        }
        .texts{
          font-size: 18px;
          color: #323232;
        }
      }
    }
  }
  .footer{
    display: flex;
    justify-content: space-between;
    .threebox{
      width: 32.9%;
      height: 400px;
      background-color: #fff;
      padding: 15px;
      .foot{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .title{
        display: flex;
        .biock{
          width: 3px;
          height: 18px;
          background-color: #187cf5;
          margin-right: 10px;
          margin-top: 2px;
          border-radius: 1px;
        }
        .texts{
          font-size: 18px;
          color: #323232;
        }
      }
      }
    }
  }
}
</style>